<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>年会抽奖</title>
  <style>
    .wrapper {
      width: 840px;
      height: 420px;
      background: url(./images/bg01.jpg) no-repeat center / cover;
      padding: 100px 250px;
      box-sizing: border-box;
      color: blue;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <strong>年会抽奖</strong>
    <h1>一等奖：<span id="one">???</span></h1>
    <h3>二等奖：<span id="two">???</span></h3>
    <h5>三等奖：<span id="three">???</span></h5>

  </div>
  <button>抽一等奖</button>
  <button>抽二等奖</button>
  <button>抽三等奖</button>
  <script>
    // 1 定义一个数组
    let stuNames = ['庄珊珊', '陈正楠', '陈宇辉', '张辉', '林鑫', '林展', '吴良硼', '薛祖信', '林晟辉', '陈杰', '许荣法', '陈志勇', '章笑容', '黎俊杨', '叶俊轶', '洪锦洋', '陈新成', '吴斌', '林昀萱', '董庆强', '黄诗龙', '陈妃', '郑弘晖', '周闻祥', '施晟宸', '陈欣威', '陈晓灿', '林青茹', '沈晓琳', '郭若昕', '陈灵钰', '杨毅', '韩煜辉', '阎冠宇', '田雪琼', '刘莹莹', '闫雪莲', '曾浩', '王雪影', '韩震洋', '孙仕悦', '施成昊', '史学新', '李佳怡', '杨银珂', '赵向林', '王发槐', '徐先鑫', '杨旭东', '梅忠钦', '刘泰江', '陈胜杰', '林峰', '陈梦梦', '陈明函', '赖心妍', '李明健', '谢铖浩', '陈志伟', '刘文锋', '官文诚', '曹正波', '温贵雯', '邹亨伟', '林俊伟', '蔡嘉乐', '李俊兴', '谢先峻', '阙苏文', '周富', '徐永淳', '彭勇斌', '石良涛', '卢亨耀', '肖钟凯韩', '吴志翔', '陈佳炜', '杨梅', '路玲', '闫继周', '刘智翔', '揭阳丽', '郭悦迎', '时学安', '周亚辉', '方增兴', '韩文杰', '代瑞', '樊小郭', '马宏达', '李舒汶', '张起瑞', '程舜', '程帅翔', '周厚辰', '叶子豪', '赵敏', '黄流涛', '陈炳鑫'];
    let one=document.querySelector('#one');
    let two=document.querySelector('#two');
    let three=document.querySelector('#three');
    // 2 获取按钮
    let buttons1=document.querySelectorAll(`button`)[0];
    let buttons2=document.querySelectorAll(`button`)[1];
    let buttons3=document.querySelectorAll(`button`)[2];

    // 2 生成一个数组范围内的随机索引
    function random (n,m){
      return Math.floor(Math.random()*(m-n+1))+n;
    };
  
    // 3 根据索引截取一个名字
   function draw(){
      let num=random(0,stuNames.length);
      console.log(num);
      let luck= stuNames[num];

      if (this===buttons1){
        one.innerText=luck;
        buttons1.disabled=true;
      }else if(this===buttons2){
        two.innerText=luck;
        buttons2.disabled=true;
      }else if(this===buttons3){
        three.innerText=luck;
        buttons3.disabled=true;
      }
    };
    buttons1.addEventListener('click',draw);
    buttons2.addEventListener('click',draw);
    buttons3.addEventListener('click',draw);
  </script>
</body>

</html>